<template>
  <view class="region">
    <picker
      mode="multiSelector"
      :disabled="disabled"
      :range="range"
      range-key="region_name"
      @change="change"
      @columnchange="columnchange"
      :value="value"
    >
      <view class="content" :style="{color: placeHolderStr=='请输入省市区'?'#666':''}">{{placeHolderStr}}</view>
    </picker>
  </view>
</template>
<script>
export default {
  props: {
    // 默认值
    defaultValue: {
      type: Array,
      default() {
        return null;
      }
    },
    disabled: {
      type: Boolean,
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      range: [[], [], []], // 绑定范围
      regionList: [[], [], []], // 容器
      value: [0, 0, 0], // 绑定值
      placeHolderStr: "请输入省市区", // 显示值
      flag: true
    };
  },
  mounted() {
    this.getProvinceData(0, 1);
  },
  methods: {
    // 设置默认值
    setDefaultValue() {
      if (this.defaultValue) {
        this.placeHolderStr = this.defaultValue.toString();
        let sheng = 0;
        let shi = 0;
        let qu = 0;
        // 省
        this.range[0].forEach((item, i) => {
          if (item.region_name == this.defaultValue[0]) {
            sheng = i;
          }
        });
        // 市
        this.range[1].forEach((item, i) => {
          if (item.region_name == this.defaultValue[1]) {
            shi = i;
          }
        });
        // 区
        this.range[2].forEach((item, i) => {
          if (item.region_name == this.defaultValue[2]) {
            qu = i;
          }
        });
        this.value = [sheng, shi, qu];
      }
    },
    // 获得省
    getProvinceData(parentCode, level) {
      // 初始化
      this.regionList = [[], [], []];
      this.$http
        .get({
          url: "/regions/getRegion",
          data: {
            parentCode,
            level
          }
        })
        .then(res => {
          res.data.forEach(item => {
            this.regionList[0].push(item);
          });
          // 回显
          if (this.defaultValue.length && this.flag) {
            res.data.forEach(item => {
              if (item.region_name == this.defaultValue[0]) {
                this.getCityData(item.region_code, 1);
              }
            });
          } else {
            this.getCityData(this.regionList[0][this.value[0]].region_code, 1);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获得市
    getCityData(parentCode, level) {
      this.$http
        .get({
          url: "/regions/getRegion",
          data: {
            parentCode,
            level
          }
        })
        .then(res => {
          res.data.forEach(item => {
            this.regionList[1].push(item);
          });
          // 回显
          if (this.defaultValue.length && this.flag) {
            res.data.forEach(item => {
              if (item.region_name == this.defaultValue[1]) {
                this.getAreaData(item.region_code, 2);
              }
            });
          } else {
            this.getAreaData(this.regionList[1][this.value[1]].region_code, 2);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获得区
    getAreaData(parentCode, level) {
      this.$http
        .get({
          url: "/regions/getRegion",
          data: {
            parentCode,
            level
          }
        })
        .then(res => {
          res.data.forEach(item => {
            this.regionList[2].push(item);
          });
          this.range = this.regionList;
          if (this.flag && this.defaultValue.length) {
            this.setDefaultValue();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 值变化
    change(e) {
      this.placeHolderStr =
        this.range[0][e.detail.value[0]].region_name +
        "," +
        this.range[1][e.detail.value[1]].region_name +
        "," +
        this.range[2][e.detail.value[2]].region_name;
      // 传值
      uni.$emit("regionStr", {
        regionStr: this.placeHolderStr
      });
    },
    // 列变化
    columnchange(e) {
      this.flag = false;
      // 改变的是省
      if (e.detail.column == 0) {
        this.value = [e.detail.value, 0, 0];
      }
      // 改变的是市
      if (e.detail.column == 1) {
        this.value.splice(1, 1, e.detail.value);
        this.value.splice(2, 1, 0);
      }
      // 改变的是区
      if (e.detail.column == 2) {
        this.value.splice(2, 1, e.detail.value);
      }
      // 设置|更新省市区数据
      this.getProvinceData(0, 1);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>